<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>orderForm</title>
</head>

<body>
    <%= require('./common/header.htm')%>


        <div id="Content">
            <div id="progressBar">

                <!-- 三个圆 -->
                <button>提交订单</button>
                <button>确认订单</button>
                <button>订单完成</button>
                <!-- 进度条 -->
                <div>
                    <span></span>
                </div>
            </div>
            <div id="Catalog">
                <div id="orderStep1">
                    <form action="#">

                        <table>
                            <tr>
                                <th colspan=2>Payment Details</th>
                            </tr>
                            <tr>
                                <td>Card Type:</td>
                                <td>
                                    <select name="cardType" id="cardType">
                                        <option>

                                        </option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>Card Number:</td>
                                <td>
                                    <input type="text" name="creditcard" th:field="*{creditcard}" id="creditcard">
                                </td>
                            </tr>
                            <tr>
                                <td>Expiry Date (MM/YYYY):</td>
                                <td>
                                    <input type="text" name="exprdate" th:field="*{exprdate}" id="exprdate">
                                </td>
                            </tr>

                        </table>

                        <div id="tab">
                            <ul>
                                <li id="billingLi" class="on">Billing Address</li>
                                <li id="shippingLi">Shipping Address</li>
                            </ul>
                            </br>
                            <div id="billing">
                                <table>
                                    <tr>
                                        <th colspan=2>Billing Address</th>
                                    </tr>

                                    <tr>
                                        <td>First name:</td>
                                        <td>
                                            <input type="text" name="billtofirstname" th:field="*{billtofirstname}"
                                                id="billtofirstname">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Last name:</td>
                                        <td>
                                            <input type="text" name="billtolastname" th:field="*{billtolastname}"
                                                id="billtolastname">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Address 1:</td>
                                        <td>
                                            <input type="text" name="billaddr1" th:field="*{billaddr1}"
                                                id="billaddr1">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Address 2:</td>
                                        <td>
                                            <input type="text" name="billaddr2" th:field="*{billaddr2}"
                                                id="billaddr2">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>City:</td>
                                        <td>
                                            <input type="text" name="billcity" th:field="*{billcity}" id="billcity">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>State:</td>
                                        <td>
                                            <input type="text" name="billstate" th:field="*{billstate}" id="billstate">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Zip:</td>
                                        <td>
                                            <input type="text" name="billzip" th:field="*{billzip}" id="billzip">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Country:</td>
                                        <td>
                                            <input type="text" name="billcountry" th:field="*{billcountry}"
                                                id="billcountry">
                                        </td>
                                    </tr>


                                </table>
                            </div>
                            <div id="shipping">
                                <table>
                                    <tr>
                                        <th colspan=2>Shipping Address</th>
                                    </tr>
                                    <tr>
                                        <td>First name:</td>
                                        <td><input type="text" name="order.shiptofirstname"
                                                th:field="*{shiptofirstname}" id="shiptofirstname" /></td>
                                    </tr>
                                    <tr>
                                        <td>Last name:</td>
                                        <td><input type="text" name="order.shiptolastname" th:field="*{shiptolastname}"
                                                id="shiptolastname" /></td>
                                    </tr>
                                    <tr>
                                        <td>Address 1:</td>
                                        <td><input type="text" size="40" name="order.shipaddr1"
                                                th:field="*{shipaddr1}" id="shipaddr1" /></td>
                                    </tr>
                                    <tr>
                                        <td>Address 2:</td>
                                        <td><input type="text" size="40" name="order.shipaddr2"
                                                th:field="*{shipaddr2}" id="shipaddr2" /></td>
                                    </tr>
                                    <tr>
                                        <td>City:</td>
                                        <td><input type="text" name="order.shipcity" th:field="*{shipcity}"
                                                id="shipcity" /></td>
                                    </tr>
                                    <tr>
                                        <td>State:</td>
                                        <td><input type="text" size="4" name="order.shipstate" th:field="*{shipstate}"
                                                id="shipstate" /></td>
                                    </tr>
                                    <tr>
                                        <td>Zip:</td>
                                        <td><input type="text" size="10" name="order.shipzip" th:field="*{shipzip}"
                                                id="shipzip" /></td>
                                    </tr>
                                    <tr>
                                        <td>Country:</td>
                                        <td><input type="text" size="15" name="order.shipcountry"
                                                th:field="*{shipcountry}" id="shipcountry" /></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <!-- <input id="Continue"  type="button" value="Continue"> -->
                        <input type="button" value="Continue" id="orderFormSubmit">
                        <!-- onclick="window.location.href = './order-confirmOrder.html'" -->
                    </form>
                </div>
            </div>
        </div>

        <%= require('./common/footer.htm')%>
</body>

</html>